<template>
    <div class="uv-pv-box">
        <one-tab v-model="active" :styleType="2" size="mini" :lists="[{id:1,name:'UV Visits'},{id:2,name:'PV Visits'}]" @onChange="getVisitData"/>
        <ul class="">
            <li>
                <p>Cumulative</p>
                <h5>{{visitData.totalVisit || 0}}</h5>
            </li>
            <li>
                <p>Today</p>
                <h5>{{visitData.dayVisit || 0}}</h5>
            </li>
            <li>
                <p>This Week</p>
                <h5>{{visitData.weekVisit || 0}}</h5>
                
            </li>
            <li>
                 <p>This Month</p>
                <h5>{{visitData.monthVisit || 0}}</h5>
            </li>
        </ul>
    </div>
</template>

<script>
import { reactive,toRefs,getCurrentInstance,onMounted,computed} from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import oneTab from './oneTab.vue'

export default {
    components:{
       oneTab
    },
    props:{
        id:'',  // 统计对象id
        visitType:'' // 访问对象类型: 1-地图，2-场景，3-店铺，4-物品，5-城市，6-广告位，7-道具，8-DAO，9-NFT
    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()

        const state = reactive({
            userInfo:computed(()=>store.state.base.userInfo),
            active:1,
            visitData:{}
        })

        onMounted(()=>{
            if(props.id && props.visitType){
                //addVisit()
                getVisitData()
            }
        })
        const getVisitData = ()=>{
            store.dispatch('base/visit_statistics',{
                objectId:props.id,
                operateType:state.active,  //访问量：1-UV,2-PV，趋势图：11-小时，5-天，2-月
                visitTypeCode:parseInt(props.visitType)
            }).then(res =>{
                state.visitData = res.data || {}
            })
        }

        const addVisit = ()=>{
            store.dispatch('base/add_visit_object',{
                objectId:props.id,
                visitTypeCode:parseInt(props.visitType),
                walletAddress:state.userInfo.walletAddress
            })
        }

        return{
            ...toRefs(state),
            getVisitData
        }
    }
}
</script>

<style lang="scss" scoped>
    .uv-pv-box{
        font-size: 22px;
        font-weight: 500;
        color: #FFFFFF;
        font-family: Inter-Medium, Inter;
        .cutBox{
            //box-shadow: 0 0 0 10px #666 inset;
            width: 100%;
            height: 400px;
            overflow: hidden;
            padding: 0;
            //background:linear-gradient(-135deg, transparent 40px, rgba(26,117,251,0.2) 0);// top-right
            //background:linear-gradient(45deg, transparent 40px, #162e48 0); // bottom-left
            background:linear-gradient(45deg, transparent 30px, rgba(26,117,251,0.2) 0) bottom left,linear-gradient(-135deg, transparent 30px, rgba(26,117,251,0.2) 0) top right;
            background-size: 50% 100% !important;
            background-repeat: no-repeat !important;
            border: 1px solid red;
        }
        ul{
            display: flex;
            list-style: none;
            background: rgba(26,117,251,0.2);
            // box-shadow: inset 0px 0px 10px 0px rgba(103,248,255,0.7);
            // border: 1px solid rgba(103,248,255,0.2);
            border-top-right-radius: 20px;
            border-bottom-left-radius: 20px;
            box-shadow: inset 0 0 10px #689ff2;
            margin:0 0 0 0;
            li{
                flex: 1;
                text-align: center;
                padding: 30px 0 30px 0;
                line-height: 42px;
                h5{
                    font-size: 26px;
                    color: #fff;
                    padding: 0;
                    margin: 0;
                    font-size: 500;
                }
                p{
                    font-size: 22px;
                    color: rgba(255,255,255,0.6);
                }
            }
        }
    }
</style>